<template>
    <div class="area-input-con">
        <div @click.stop="handleOpen" class="select-btn">
            <label v-if="provinceCode">{{ provinceName }}</label>&nbsp;
            <label v-if="cityCode">{{ cityName }}</label>&nbsp;
            <label v-if="areaCode">{{ areaName }}</label>&nbsp;
            

            <CloseCircleFilled v-if="provinceCode" @click.stop="clear" class="close-btn" />
        </div>
        <Transition name="list">
            <div v-if="showList" @click.stop class="list-con">
                <Transition name="list">
                    <div v-if="provinceList.length > 0" class="list-a">
                        <div v-for="item in provinceList" :class="{ 'active': provinceCode == item.code }"
                            @click="changeProvince(item)" class="item">{{ item.name }}</div>

                    </div>
                </Transition>
                <Transition name="list">
                    <div v-if="cityList.length > 0" class="list-a">
                        <div v-for="item in cityList" :class="{ 'active': cityCode == item.code }"
                            @click="changeCity(item)" class="item">{{ item.name }}</div>

                    </div>
                </Transition>
                <Transition name="list">
                    <div v-if="areaList.length > 0" class="list-a">
                        <div v-for="item in areaList" :class="{ 'active': areaCode == item.code }"
                          @click="changeArea(item)"  class="item">{{ item.name }}</div>

                    </div>
                </Transition>
            </div>
        </Transition>
    </div>
</template>
<script setup lang="ts">
import { CloseCircleFilled } from "@ant-design/icons-vue";
import { onMounted, ref, watch } from 'vue'
import { Form } from "ant-design-vue";
import type { Area } from "@/types/Area";
import { getArea, getCity, getProvince } from '@/api/areaApi';
const formItemContext = Form.useInjectFormItemContext();
const props = withDefaults(defineProps<{
    showStreet?: boolean,
    showVillage?: boolean,
}>(), {
    showStreet: true,
    showVillage: true,
})
const provinceCode = defineModel<string>('provinceCode')
const provinceName = defineModel<string>('provinceName')
const cityCode = defineModel<string>('cityCode')
const cityName = defineModel<string>('cityName')
const areaCode = defineModel<string>('areaCode')
const areaName = defineModel<string>('areaName')


const showList = ref(false)
const provinceList = ref<Area[]>([])
const cityList = ref<Area[]>([])
const areaList = ref<Area[]>([])


const emit = defineEmits<{
    change: []
}>()


const clear = () => {
    handleClose()

    provinceCode.value = undefined
    provinceName.value = undefined
    cityCode.value = undefined
    cityName.value = undefined
    areaCode.value = undefined
    areaName.value = undefined

    formItemContext.onFieldChange()
    emit('change')
}
const handleOpen = async () => {

    showList.value = true
    
}
const handleClose = () => {
    
    // provinceList.value = []
    // cityList.value = []
    // areaList.value = []
    // streetList.value = []
    // villageList.value = []
    showList.value = false
}

const getProvinceList = async () => {
    let res = await getProvince()
    provinceList.value = res.data
    for(let item of res.data){
        if(item.code == provinceCode.value){
            provinceName.value = item.name
        }
    }
}

const getCityList = async (code: string) => {
    let res = await getCity(code)
    cityList.value = res.data
    for(let item of res.data){
        if(item.code == cityCode.value){
            cityName.value = item.name
        }
    }
}

const getAreaList = async (code: string) => {
    let res = await getArea(code)
    areaList.value = res.data
    for(let item of res.data){
        if(item.code == areaCode.value){
            areaName.value = item.name
        }
    }
}





const changeProvince = (item: Area) => {
    provinceCode.value = item.code
    provinceName.value = item.name

    cityList.value = []
    areaList.value = []

    cityCode.value = undefined
    cityName.value = undefined
    areaCode.value = undefined
    areaName.value = undefined

    getCityList(item.code!)
    formItemContext.onFieldChange()
}
const changeCity = (item: Area) => {
    cityCode.value = item.code
    cityName.value = item.name

    areaList.value = []

    areaCode.value = undefined
    areaName.value = undefined

    getAreaList(item.code!)
    formItemContext.onFieldChange()
}


const changeArea = (item: Area) => {
    areaCode.value = item.code
    areaName.value = item.name
    formItemContext.onFieldChange()
    handleClose()

}

onMounted(() => {
    document.body.onclick = () => {
        handleClose()
    }

    getProvinceList()
   
    if (provinceCode.value) {
        getCityList(provinceCode.value)
    }
    if (cityCode.value) {
        getAreaList(cityCode.value)
    }
    
})

</script>
<style scoped>
.area-input-con {
    position: relative;
}

.select-btn {
    position: relative;
    border: 1px solid #dcdcdc;
    border-radius: 2px;
    box-sizing: border-box;
    margin: 0;
    padding: 3px 11px;
    color: rgba(0, 0, 0, 0.88);
    font-size: 16px;
    height: 32px;
    cursor: pointer;
}

.list-con {

    box-shadow: 0 0 10px 0 #00000033;
    position: absolute;
    z-index: 10;
    top: 34px;
    left: 0;
    white-space: nowrap;
    height: 310px;
    overflow-y: hidden;
}

.list-a {
    background: #fff;
    display: inline-block;
    vertical-align: top;
    width: 200px;
    height: 300px;
    overflow-y: scroll;
}

.item {
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
}

.item:hover {
    background: #eee;
}

.item.active {
    background: #4096ff;
    color: #fff;
}


.list-enter-active,
.list-leave-active {
    transition: 0.3s ease;

}

.list-enter-from,
.list-leave-to {
    /* opacity: 0; */
    /* transform: scaleY(0); */
    height: 0px;
}

.close-btn {
  position: absolute;
  right: 5px;
  cursor: pointer;
  top: 8px;
  color: rgba(0, 0, 0, 0.25);
  font-size: 12px;
}
</style>